<template>

<!-- {{ pass_position }}
{{ token }}
{{ pass_SelectedMenuItem }} -->
 <!-- {{ pass_username }} -->
<div class="Slary" v-if="pass_SelectedMenuItem==='薪资计算'&&pass_position==='boss'">
    老板你好，你的薪资是infinity
</div>
<div class="Slary" v-else-if="pass_SelectedMenuItem==='薪资计算'">
    <br>
    <br>
    <br>
    <br>
    <br>
    {{Hello}}你好 
    你的薪资是
    <p>您的底薪是{{this.Slary_consititution.di_xi}}</p>
    <p>本月您提成为{{this.Slary_consititution.ti_cheng}}</p>
    <p>本月您加班天数为{{this.Slary_consititution.jia_ban}}天</p>
    <p>本月您请假天数为{{this.Slary_consititution.qin_jia}}天</p>
    <p v-if="this.Slary_consititution.quan_qin===1">恭喜你，本月全勤</p>
    <p v-else>抱歉，本月您没有全勤</p>
    <p>本月您的薪资为{{this.Slary_consititution.total}}</p>
    <!-- {{Slary_consititution}} -->
    <div class="Slary_rules">

        <p style="color:darkgrey;font-size: 0.5em;">薪资计算规则</p>
            <p style="color:darkgrey;font-size: 0.5em;">员工的职位不同，底薪也不一样，教师底薪为 8600 元，行政底薪为 14000 元，
                老板底薪设置为无限infinity， 财务底薪为 9000 元，IT程序员底薪为 15000 元。加班费：每加班一天，员工的薪资增加 200 元；
                请假扣款：如果员工有请假记录，则根据请假天数扣除相应的薪资，每请一天假扣 300 元，并记录请假天数，同时失去全勤奖；
                全勤奖金：如果员工没有请假，则在总薪资上加上 300 元的全勤奖金。总薪资由底薪、加班费、请假扣款和全勤奖金共同决定。
            </p>
    </div>
</div>

<div class="Arrangement_of_work" v-else-if="pass_SelectedMenuItem==='上班安排'">
    上班咯
    <span ref="clock">{{ currentTime }}</span> 
<!-- 循环展示任务列表 -->
    <div class="task_content" v-if="this.pass_position==='boss'||this.pass_position==='admin'">
        <h1>发布任务</h1>
                
        <form @submit.prevent="submittask(task)">
            任务接受者
            <select id="assigneeSelect" v-model="task.receiver">
                <option v-for="user in userlist" :key="user.username">
                    {{ user.username }} 
                </option>
            </select>
            <label for="maincontent">任务内容:</label>
            <textarea id="reason" v-model="task.maincontent" required></textarea>
            <label for="startDate">开始日期:</label>
            <input type="date" id="startDate" v-model="task.startDate" required>
            <label for="endDate">结束日期:</label>
            <input type="date" id="endDate" v-model="task.endDate" required>
            <button type="submit">发布任务</button>
        </form>
        <h1>公司任务列表</h1>
        <li v-for="task in this.tasks_golbal" :key="task.sendtime" >
            <p>任务发布者{{ task.sender }}</p>
            <p>任务接受者{{ task.receiver}}</p>
            <p>任务内容{{ task.maincontent }}</p>
            <p>任务发布时间{{ task.sendtime }}</p>
            <p>任务开始时间{{ task.startDate }}</p>
            <p>任务截止时间{{ task.endDate }}</p>
            <p>任务当前状态{{ task.status }}</p>
        </li>
    </div>
    <div class="task_content" v-else>
        任务
        <li v-for="task in tasks" :key="task.sendtime" >
            <p>任务发布者{{ task.sender }}</p>
            <p>任务接受者{{ task.receiver}}</p>
            <p>任务内容{{ task.maincontent }}</p>
            <p>任务发布时间{{ task.sendtime }}</p>
            <p>任务开始时间{{ task.startDate }}</p>
            <p>任务截止时间{{ task.endDate }}</p>
            <p>任务当前状态{{ task.status }}</p>
            <button @click="confirmdonepermission(task, '已完成')">已完成</button> 
        </li>
    </div> 
</div>
<div class="Arrangement_of_work" v-else-if="pass_SelectedMenuItem==='公费报销'">
    公费报销
</div>
</template>
  
<script>
export default{

    data()
    {
        return{
            leaveRecords:[],
            Hello:'',
            Slary_consititution:
            {
                di_xi:0,
                ti_cheng:0,
                jia_ban:0,
                qin_jia:0,      //扣掉的工资
                quan_qin:1,     //只能为0或者1,1为全勤，0为没有全勤
                total:0
            },
            user_info:{
                username:'123',
            },
            task:
            {
                sender:'',
                receiver:'',
                sendtime:'',
                startDate:'',
                endDate:'',
                maincontent:'',
                status:'未完成',//任务的状态
            },
            userlist:[],//用来存储当前可以被发布任务的用户当然不包括老板还有同级别的管理人员
            // pass_SelectedMenuItem:'薪资计算',//默认设定为薪资计算模块的展示
            currentTime:new Date().toLocaleDateString(),
            tasks: [],
            tasks_golbal:[],
            timer:null,
        };
    },


    
    props:['pass_position','token','pass_SelectedMenuItem'],

    mounted()
    {
        this.updateClock();
    },
    computed:{
        // SubtractSlary()
        // {
        //     const res=this.leaveRecords.length;
        //     res*= 100;
        //     return res;
        // }
        
    },
    methods:{
        sayHello() {
            switch (this.pass_position) {
                case 'boss':
                    return '老板';
                case 'teacher':
                    return '老师';
                case 'it':
                    return '程序员';
                case 'admin':
                    return '高管'
                case 'teacher':
                    return '老师'
                default:
                    return '';
            }
        },
        initemployeeslary()
        {
            if(this.pass_position==='teacher')
            {
                this.Slary_consititution.di_xi=8600;
            }
            if(this.pass_position==='admin')
            {
                this.Slary_consititution.di_xi=14000;
            }
            if(this.pass_position==='boss')
            {
                this.Slary_consititution.di_xi='infinity';
            }
            if(this.pass_position==='finance')
            {
                this.Slary_consititution.di_xi=9000;
            }
            if(this.pass_position==='it')
            {
                this.Slary_consititution.di_xi=15000;
            }

            //


            this.Slary_consititution.total=this.Slary_consititution.di_xi+this.Slary_consititution.ti_cheng

            if(this.leaveRecords.length!=0)//如果发现这个员工有请假，那么设置全勤奖为0
            {
                this.Slary_consititution.total-=this.leaveRecords.length*300;//底薪加提成减请假天数乘以300（请一天假扣三百）
                this.Slary_consititution.qin_jia=this.leaveRecords.length;
                this.Slary_consititution.quan_qin=0;
            }
            else
            {
                this.Slary_consititution.qin_jia=0;
                this.Slary_consititution.quan_qin=1;
            }
            this.Slary_consititution.total+=this.Slary_consititution.jia_ban*200;
            if(this.Slary_consititution.quan_qin!=0)
            {
                this.Slary_consititution.total+=300;//如果全勤，那么加三百奖金
            }
        },
        init_user_info()
        {
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                if (key && key.startsWith('user')) 
                {
                    const userd = JSON.parse(localStorage.getItem(key));
                    if(userd.token===this.token)
                    {
                        // const res.username=this.username;
                        this.user_info.username=userd.username;
                        // console.log(this.user_info.username)
                    }
                }
            }
        },
        init_user_acceptable_info()
        {
            //从localstorage里面初始化展示当前可以被接受任务的人员
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                if (key && key.startsWith('user')) 
                {
                    const userd = JSON.parse(localStorage.getItem(key));
                    // if(userd.position!=='boss'&&userd.position!=='admin')
                    if(userd.position!=='boss'&&userd.position!=='admin'&&userd.token!==this.token)
                    {
                        // const res.username=this.username;
                        this.userlist.push(userd);
                    }
                }
            }
            // console.log(this.userlist);
        },
        initvocationrecords(){
            this.leaveRecords = [];
            for (let i = 0; i < localStorage.length; i++) 
            {
                const key = localStorage.key(i);
                if (key && key.startsWith('vp')) 
                {
                    const record = JSON.parse(localStorage.getItem(key));
                    if (record.token === this.token) {
                        //在records里面新增一条记录record
                        this.leaveRecords.push(record);
                    }
                }
            }
        },
        updateClock() {
            this.currentTime = new Date().toLocaleTimeString('en-US', {
                hour12: false, // 使用24小时制
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            
            this.timer = setInterval(() => {
                    this.currentTime = new Date().toLocaleTimeString('en-US', {
                        hour12: false,
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                }, 1000);// 每1000毫秒（1秒）更新一次时间
            },
        clearClock() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        },
        initiate_task(){
            this.tasks = [];
            for (let i = 0; i < localStorage.length; i++) 
            {
                const key = localStorage.key(i);
                if (key && key.startsWith('tk')) 
                {
                    const tasktemp = JSON.parse(localStorage.getItem(key));
                    if (tasktemp.receiver === this.user_info.username) {
                        //在tasks里面新增一条任务
                        this.tasks.push(tasktemp);
                    }
                }
            }
        },
        initiate_global_task()
        {
            this.tasks_golbal = [];
            for (let i = 0; i < localStorage.length; i++) 
            {
                const key = localStorage.key(i);
                if (key && key.startsWith('tk')) 
                {
                    const record = JSON.parse(localStorage.getItem(key));
                    this.tasks_golbal.push(record);//在tasks里面新增一条任务
                }
            }
        },
        submittask(task)
        {
            const taskkey='tk'+Date.now();
            task.sender=this.user_info.username;
            task.sendtime=Date.now();
            task.status='未完成';
            localStorage.setItem(taskkey,JSON.stringify(task));
            this.initiate_global_task();
        },
        confirmdonepermission(task,status)
        {
            for (let i = 0; i < localStorage.length; i++) 
            {
                const key = localStorage.key(i);
                if (key && key.startsWith('tk')) 
                {
                    const tasktemp = JSON.parse(localStorage.getItem(key));
                    if (tasktemp.sendtime === task.sendtime) {
                        // console.log('hello')
                        localStorage.removeItem('tk' + task.sendtime);
                        task.status=status;
                        localStorage.setItem('tk'+task.sendtime, JSON.stringify(task));
                    }
                }
            }

        }
    },

    beforeDestroy() {
        this.clearClock();// 确保在组件销毁前清除定时器
    },
    created(){
        this.initemployeeslary();
        this.initvocationrecords();
        this.init_user_info();
        this.initiate_task();
        this.initiate_global_task();
        this.init_user_acceptable_info();
        this.Hello=this.sayHello();
    }

}
</script>

<style scoped>
.Slary
{
    text-align: center;
    font-size: 1.5em;
}
input[type="date"],
select,
textarea {
  border: 1px solid #ccc; /* 统一边框 */
  
  padding: 8px; /* 添加内边距 */
  margin-bottom: 10px; /* 调整下方间距 */
  width: 100%; /* 宽度100% */
  box-sizing: border-box; /* 边框和内边距包含在宽度内 */
}
.enlarged-text {
    font-size: 2em; /* 增大字体大小 */
    font-weight: bold; /* 加粗字体 */
    color: #333; /* 字体颜色 */
}
.Arrangement_of_work {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px;
}

.Arrangement_of_work h1 {
    color: #333;
    font-size: 24px;
    margin-bottom: 10px;
}

.Arrangement_of_work span {
    color: #555;
    font-size: 18px;
}

.Arrangement_of_work form {
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.Arrangement_of_work label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.Arrangement_of_work input[type="date"],
.Arrangement_of_work select,
.Arrangement_of_work textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.Arrangement_of_work button {
    background-color: #5cb85c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.Arrangement_of_work button:hover {
    background-color: #4cae4c;
}

.Arrangement_of_work li {
    background-color: #e7e7e7;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    list-style-type: none;
}

.Arrangement_of_work p {
    margin: 5px 0;
    color: #666;
}

/* Add responsive design for smaller screens */
@media (max-width: 768px) {
    .Arrangement_of_work {
        margin: 10px;
    }

    .Arrangement_of_work h1 {
        font-size: 20px;
    }

    .Arrangement_of_work span {
        font-size: 16px;
    }

    .Arrangement_of_work button {
        padding: 8px 16px;
    }
}
  </style>